<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>职工考勤</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="../css/main.css">
	<link rel="stylesheet" href="css/teacher_attendance.css">
</head>

<body>
	<div id="vue-root">
		<div class="contain">
			<div class="header">
				<div class="header_title">职工考勤</div>
				<a onclick="history.back()">
					<img src="../image/return.png" alt="" class="return">
				</a>
			</div>
		</div>
		<!-- 职工考勤 -->
		<div class="dates">
			<input type="date" v-model="search.date" class="input_id"/>
			<select class="select_id" style="height: 100%;" v-model="search.periodId" v-if="periods.length">
				<option :value="undefined">请选择时间段</option>
				<option v-for="period in periods" v-text="period.name" :key="period.id" :value="period.id">
				</option>
			</select>
		</div>
		<div class="attendance-list">
			<div class="info">
				<div>已签到:</div>
				<a v-for="item in punched" :key="item.studentId" :href="href(item)">
					<div class="staff-name complete" v-text="item.studentName"></div>
				</a>

			</div>
			<div class="info">
				<div>未签到:</div>
				<a v-for="item in absent" :key="item.studentId">
					<div class="staff-name" v-text="item.studentName"></div>
				</a>

			</div>
		</div>
		<div class="statistics">
			<div class="statistics-info">
				<div>全校职工</div>
				<div><span v-text="punched.length+absent.length"></span>人</div>
			</div>
			<div class="statistics-info">
				<div>已签到</div>
				<div><span v-text="punched.length"></span>人</div>
			</div>
			<div class="statistics-info">
				<div>未签到</div>
				<div><span v-text="absent.length"></span>人</div>
			</div>
		</div>

	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/scriptZIP/zh-cn.min.js"></script>

	<script src="/js/common.js"></script>

	<script>

		dayjs.locale('zh-cn');
		var app = new Vue({
			el: '#vue-root',
			data: {
				search: {
					date: dayjs().format('YYYY-MM-DD')
				},
				punched: [],
				absent: [],
				periods: []
			},
			created: function () {
				this.getData();
				axios.get('/t/period/all').then(function (res) {
					this.periods = res.data;
				}.bind(this));
			},
			methods: {
				getData: function () {
					if (!this.search.date) return;
					axios.get('/t/attendance1', {
						params: this.search
					}).then(function (res) {
						this.punched = [];
						this.absent = [];
						res.data.forEach(function (it) {
							if (it.punched) this.punched.push(it);
							else this.absent.push(it);
						}.bind(this));
					}.bind(this));
				},
				href: function (item) {
					return '../attendance_record.html?' + Qs.stringify({
						date: this.search.date,
						teacherId: item.studentId,
					});
				}
			},
			computed: {
				day: function () {
					return dayjs(this.search.date).format('dddd');
				}
			},
			watch: {
				'search.date': function () {
					this.getData();
				},
				'search.periodId': function () {
					this.getData();
				}
			}
		});

	</script>

</body>

</html>